<template>
  <div class="bottomLeft">
    <div class="bg-color-black">
      <div class="box-title">
        <img :src="img" class="title-img" style="height: 16px" alt="" />
        岗位要求色卡分析图
      </div>
      <div class="chartAll">
        <div v-for="item in chartListData" :key="item.id">
          <div class="tips">{{ item.name }}</div>
          <div v-for="item2 in item.child" :key="item2.id" class="echarstBox"></div>
          <!-- <div ref="chartRef" class="chartBox1" />
          <div ref="chartRef2" class="chartBox1" />
          <div ref="chartRef3" class="chartBox1" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, defineProps, watch } from "vue";
import * as echarts from "echarts";
import { getColorCard } from "@/api/dataView";

// 定义 ref
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
const props = defineProps(['selectId']);
const chartRef = ref();
const chartRef2 = ref();
const chartRef3 = ref();
const myChart = ref(null);
const myChart2 = ref(null);
const myChart3 = ref(null);
const chartListData = ref([]);
const img = ref(require("@/assets/three.png"));

watch(()=>props.selectId, (newVal)=>{
  if(props.selectId || props.selectId == 0) {
    getData(newVal)
  }
},{
  immediate: true,
  deep: true
})


function getOptions(data) {
  let list = data.child.map((item)=>{
    return {
        name: item.name,
        type: "bar",
        stack: "total",
        barWidth: 14,
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [item.jobCount],
      }
  })
  let obj = {
    legend: {
      type: "scroll",
      orient: "horizontal",
      bottom: "bottom",
      textStyle: {
        color: "white",
      },
      left: "13%",
      // y: "55",
    },
    grid: {
      left: "0%",
      right: "0%",
      bottom: "3%",
      top: "0%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      show: false,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#212d45",
        },
      },
      axisLabel: {
        color: "white",
      },
    },
    yAxis: {
      type: "category",
      data: [data.name],
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "white",
      },
      axisLine: {
        show: false,
      },
    },
    series: list,
  };
  return obj;
}

function getAllList(data) {
  console.log('data', data)
  let list = [];
  data.forEach((item)=>{
    if(item.child.length) {
      list = list.concat(item.child)
    }
  })
  return list;
}



function initChart() {
  const dataList = getAllList(chartListData.value)
  let chartDom = document.getElementsByClassName('echarstBox')
  for(let i = 0; i< chartDom.length; i++) {
    let mayChart = echarts.init(chartDom[i])
    unwarp(mayChart).setOption(getOptions(dataList[i]))
  }
}

// 获取数据
async function getData(id) {
  const res = await getColorCard(id);
  chartListData.value = res.data;
  nextTick(()=>{
    initChart();
  })
  console.log("res666", res);
}

onMounted(async () => {
  // nextTick(()=>{
  //   inintData();
  // })
  // await getData();
  
});
</script>

<style lang="scss" scoped>
$box-height: 556px;
$box-width: 100%;
.bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .box-title {
    height: 40px;
    border-left: 5px solid #409eff;
    background-color: #081f43;
    padding-left: 25px;
    box-sizing: border-box;
    position: relative;
    line-height: 40px;
    margin-bottom: 8px;
    .title-img {
      position: absolute;
      left: 6px;
      top: 12px;
    }
  }
}
.chartAll {
  height: 470px;
  overflow-y: scroll;
}
.chartAll::-webkit-scrollbar{
     width: 0px;
  }
.echarstBox {
  // width: 400px;
  height: 60px;
  margin-bottom: 10px;
}
.tips {
  text-align: right;
  line-height: 30px;
  color: #2dc7fa;
}
</style>
